import { useEffect, useState } from 'react'
import { useMemoizedFn } from 'ahooks'
import { Card, Timeline } from 'antd'
import Icon from '@ant-design/icons'

import { Texty } from '@/components/Texty'
import { VCenterEmpty } from '@/components/VCenterEmpty'
import { apiGetAddressMsg, apiGetOrderProductBoxInfo } from './apis'
import { IAddress, IOrderProductBoxInfo } from './interface'
import mailIcon from '@/assets/icons/mail.svg?react'
import phoneIcon from '@/assets/icons/phone.svg?react'
import userIcon from '@/assets/icons/user.svg?react'
import styles from './styles.module.less'

interface IProps {
  waybillNo: string
}

export const Address = (props: IProps) => {
  const { waybillNo } = props
  const [addressInfo, setAddressInfo] = useState<IAddress>()
  const [productBoxInfo, setProductBoxInfo] = useState<IOrderProductBoxInfo>()
  const [loading, setLoading] = useState<boolean>(false)

  const initData = useMemoizedFn(async (isinit?: boolean) => {
    try {
      if (isinit) setLoading(true)
      const [addressRes, productBoxInfoRes] = await Promise.all([
        apiGetAddressMsg(waybillNo),
        apiGetOrderProductBoxInfo(waybillNo),
      ])
      setAddressInfo(addressRes)
      setProductBoxInfo(productBoxInfoRes)
    } finally {
      if (isinit) setLoading(false)
    }
  })

  useEffect(() => {
    initData(true)
  }, [initData, waybillNo])

  return (
    <Card className={styles.card} title="地址信息" loading={loading}>
      {!addressInfo ? (
        VCenterEmpty.render()
      ) : (
        <div className={styles.box}>
          <Timeline
            items={[
              {
                children: (
                  <div className={styles.contain}>
                    <div className={styles.title}>
                      {addressInfo?.supplierWarehouse} <span>{addressInfo?.supplierCountry}</span>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.temp}>
                        <Texty>{addressInfo?.supplierAddress}</Texty>
                      </div>
                      <div>
                        {addressInfo?.supplierContacts}：{addressInfo?.supplierPhone}
                      </div>
                    </div>
                  </div>
                ),
              },
              {
                children: (
                  <div className={styles.contain}>
                    <div className={styles.title}>
                      {addressInfo?.destinationCode} <span>{addressInfo?.destinationCountry}</span>
                    </div>
                    <div className={styles.text}>
                      <span>
                        <Texty>{addressInfo?.destinationAddress || '--'}</Texty>
                      </span>
                    </div>
                    <div className={styles.item}>
                      <Icon className={styles.icon} component={userIcon} />
                      <span>{addressInfo?.destinationContacts || '--'}</span>
                    </div>
                    <div className={styles.item}>
                      <Icon className={styles.icon} component={phoneIcon} />
                      <span>{addressInfo?.destinationPhone || '--'}</span>
                    </div>
                    <div className={styles.item}>
                      <Icon className={styles.icon} component={mailIcon} />
                      <span>{addressInfo?.destinationMail || '--'}</span>
                    </div>
                  </div>
                ),
              },
            ]}
          />
          <div className={styles.footer}>
            <div className={styles.footer_item}>
              <div className={styles.text}>总箱数</div>
              <div>
                <span className={styles.num}>{productBoxInfo?.boxNum}</span> CTNS
              </div>
            </div>
            <div className={styles.footer_item}>
              <div className={styles.text}>总重量</div>
              <div>
                <span className={styles.num}>{productBoxInfo?.weight}</span> KGS
              </div>
            </div>
            <div className={styles.footer_item}>
              <div className={styles.text}>总体积</div>
              <div>
                <span className={styles.num}>{productBoxInfo?.volume}</span> CBM
              </div>
            </div>
          </div>
        </div>
      )}
    </Card>
  )
}
